<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/head :: header('桀骜的个人博客')"/>
    <th:block th:include="common/include :: editormd-css"/>
    <th:block th:include="common/include :: viewer-css"/>
    <!--分享功能插件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css">

    <link rel="stylesheet" href="/front/css/article.css">
    <link rel="stylesheet" href="/front/css/comment.css">
</head>
<body>
<div id="app">
    <div th:include="common/head :: nav('桀骜的个人博客')"></div>
    <!--页面主体-->
    <div id="main">
        <div class="am-container">
            <div class="am-g">
                <div class="am-u-sm-12 am-u-lg-12">
                    <div class="content">
                        <div class="article">
                            <div class="ja-article-top">
                                <article-top>
                                    <div class="article-title">
                                        <h1>[[${article.title}]]</h1>
                                    </div>
                                    <div class="article-info row">
                                        <div class="article-info article-info-publishDate">
                                            <i class="am-icon-calendar"><a class="articleCategoryColor"
                                                                           href="/archives?archive=' + data.publishDate + '">
                                                [[${#dates.format(article.releaseTime, 'yyyy-MM-dd')}]]
                                            </a></i>
                                        </div>
                                        <div class="article-info article-info-originalAuthor">
                                            <i class="am-icon-user"> [[${article.createBy}]]</i>
                                        </div>
                                        <div class="article-info article-info-categories">
                                            <i class="am-icon-folder"> <a class="articleCategoryColor"
                                                                          href="/categories?category=' + data.articleCategories + '">[[${article.catalogName}]]</a></i>
                                        </div>
                                    </div>
                                </article-top>
                                <div class="article-i-say">
                                    不逼自己一下，真的不知道自己有多大潜力。<span class="article-i-say-me">--- 桀骜</span>
                                </div>
                            </div>

                            <div class="article-content">
                                <div id="acticleView">
                                    <textarea style="display:none;" name="editormd-markdown-doc" id="mdText"></textarea>
                                </div>
                            </div>

                            <div class="ja-article-footer">
                                <div class="end-logo">
                                    <i class="am-icon-btn am-success am-icon-lg">完</i>
                                </div>
                                <div class="article-tags"></div>
                                <ul class="post-copyright">
                                    <li><strong>本文作者：</strong><span id="authorFooter">[[${article.createBy}]]</span>
                                    </li>
                                </ul>
                            </div>
                            <hr>
                        </div>
                        <div class="other"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--消息盒子+反馈-->
    <div th:include="common/other :: other"></div>
    <!--引入共有底部-->
    <div th:include="common/footer :: footer"></div>
</div>
<th:block th:include="common/include :: editormd-js"/>
<th:block th:include="common/include :: viewer-js"/>

<script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js"></script>
<script type="text/javascript" th:src="@{/front/js/redirect.js}"></script>
<script type="text/javascript" th:src="@{/front/js/all.js}"></script>

<script th:inline="javascript">
    var article = [[${article}]];
    $(document).ready(function () {
        //填充文章
        putArticle();
        //填充图片放大效果
        putImg();

    });

    //填充文章
    function putArticle() {
        if (article.content) {
            $("#mdText").text(article.content);
            var acticleView = editormd.markdownToHTML("acticleView", {
                markdown: article.content,//+ "\r\n" + $("#append-test").text(),
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                tocm: true,    // Using [TOCM]
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });
        } else {
            $('.article-content').html('');
            var error = $('<div class="article"><div class="zhy-article-top"><div class="error">' +
                '<img src="/static/img/register_success.gif">' +
                '<p>没有找到这篇文章哦</p>' +
                '<p>可能不小心被博主手残删掉了吧</p>' +
                '<div class="row">' +
                '<a href="/">返回首页</a>' +
                '</div>' +
                '</div></div></div>');
            $('.article-content').append(error);
        }
    }

    //图片放大
    function putImg() {
        //选中所有需放大的图片加上data-src属性
        $("#acticleView img").each(function(index){
            if(!$(this).hasClass("emoji")){
                var a=$(this).attr('src');
                $(this).attr("data-original",a);
            }
        });

        $('#acticleView').viewer({
            url: 'data-original',
        });

    }
</script>
</body>
</html>
